<template>
	<view id="app" v-cloak>
		<view class="app-top">
			健康顾问团
		</view>
		<view class="app-bottom" v-if="list.length > 0">
			<view class="app-left">
				<view v-for="(item,index) in list" class="item" @click="select = index">
					{{item.tname}}
					<view v-if="index == select" class="sanjiao">
					</view>
				</view>
			</view>
			<view class="app-right">
				<view style="height:40px;display:flex;justify-content:center;align-items:center;">
					<view @click="sortselect=index" v-for="(item,index) in sort" style="height:20px;width:30%;font-size:12px;line-height:20px;text-align:center;" :style="{marginLeft:(index != 0 ? '5px' : '0px') , background:(sortselect == index) ? 'rgb(61,187,41)' : 'rgb(240,240,240)' , color:(sortselect == index) ? 'white' : 'rgb(136,136,136)'}">
						{{item.name}}
						<view v-if="index == sortselect" class="sanjiao1" :style="{right:-(((width - 80)*0.3)/2-3)+'px'}">
						</view>
					</view>
				</view>
				<view>
					<view @click="detail(item.did)" v-for="item in list[select].list" style="width:96%;margin:10px auto;height:190px;border:1px solid rgb(220,220,220);border-radius:12px;overflow:hidden;">
						<view style="height:150px;background:rgb(240,253,243);border-bottom:1px solid rgb(220,220,220);overflow:hidden;">
							<view style="display:flex;height:80px;margin-top:20px;">
								<view style="width:65px;height:80px;background:rgb(178,223,192);margin-left:10px;">
									<view style="width:57px;height:72px;margin:4px;">
										<img :src="switchIcon(item.icon)" style="width:100%;height:100%;" />
									</view>
								</view>
								<view style="flex-grow:1;margin-left:15px;">
									<view style="display:flex;height:30px;">
										<view style="font-size:16px;font-weight:bold;line-height:30px;">{{item.dname}}</view>
										<view style="font-size:14px;margin-left:10px;color:grey;line-height:32px;">{{item.zhiCheng.zname}}</view>
									</view>
									<view style="height:40px;line-height:40px;color:red;font-size:15px;">
										好评率:{{item.haopin == undefined ? "100%" : item.haopin*100+"%"}}
									</view>
								</view>
							</view>
							<view style="height:50px;margin:10px;font-size:13px;color:grey;line-height:19px;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display:-webkit-box;">
								{{item.tname}}:{{item.ddesc}}
							</view>
						</view>
						<view style="height:40px;display:flex;margin:0 10px;justify-content: space-between;align-items:center;width:100%:">
							<view style="font-size:13px;color:grey;line-height:40px;">已经帮助{{item.renshu == undefined ? 1000 : item.renshu}}人</view>
							<view style="width:100px;height:30px;line-height:30px;text-align:center;background:rgb(246,165,122);color:white;font-size:13px;border-radius:6px;">向他咨询</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height:0 ,
				width:0 ,
				select:0 ,
				sortselect:0 ,
				sort:[{name:"综合排序"} , {name:"接待人数"} , {name:"注册时间"}] ,
				list:[]
			}
		},
		methods: {
			//跳转医生详情
			detail(did){
				// console.log("医生ID："+did)
				uni.navigateTo({
					url:'dotorDetail?did='+did
				})
			},
			//返回医生图片
			switchIcon(icon){
				if(icon.includes("http")){
					return icon
				}
				return this.host+icon;
			}
		},
		onLoad() {
			this.$http.get('/doctor.do',{
				p:'init'
			}).then(res => {
				this.list = res.data.data;
			})
		}
	}
</script>

<style>
	*{margin:0px;padding:0px;}
	html,body{width:100%;}
	#app{
		width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;
	}
	#app .app-left{
		width:80px;flex-shrink: 0;height:100%;
		overflow-y:auto;
	}
	#app .app-right{
		flex-grow:1 ;
		height:100%;
		overflow-y:auto;
	}

	#app .app-left .item{
		width:100%;height:40px;line-height:40px;text-align:center;
		font-size:13px;background:rgb(245,245,245);border-bottom:1px solid rgb(225,225,225);
	}

	#app .app-top{
		width:100%;height:45px;flex-shrink:0;
		background:rgb(233 , 233 , 233);
		border-bottom:1px solid rgb(225,225,225);
		font-size:16px;text-align:center;line-height:45px;color:#27cc27;
	}
	#app .app-bottom{
		width:100%;flex-shrink: 0;overflow:hidden;display:flex;
	}
	.sanjiao{
		position:relative;top:-30px;right:0px;
		border-right:10px solid white;
		border-left:10px solid  transparent;
		border-top:10px solid  transparent;
		border-bottom: 10px solid transparent;
	}
	/* .sanjiao1{
		width:0px;
		position:relative;bottom:0px;right:-50px;
		border-right:6px solid transparent;
		border-left:6px solid  transparent;
		border-top:6px solid  rgb(61,187,41);
		border-bottom: 6px solid transparent;
	} */

	[v-cloak] {
		display: none !important;
	}
</style>
